<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="../internal.js"></script>
    <link rel="stylesheet" type="text/css" href="video.css" />

    <!--浏览器小图标-->
    <link rel="icon" href="//cdn.mingsoft.net/global/images/ms.ico" type="x-icon">
    <script type="text/javascript" src="../../../../vue/2.6.9/vue.min.js"></script>
    <script src="../../../../vue-i18n/8.18.2/vue-i18n.js"></script>
    <!-- 图标 -->
    <link rel="stylesheet" type="text/css" href="../../../../iconfont/1.0.0/iconfont.css" />
    <script src="../../../../iconfont/1.0.0/iconfont.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../element-ui/2.15.7/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="../../../../element-ui/2.15.7/index.min.js"></script>
    <script src="../../../../element-ui/2.15.7/local/en.min.js"></script>
    <script src="../../../../element-ui/2.15.7/local/zh-CN.min.js"></script>
    <!--图片懒加载-->
    <script src="../../../../vue.lazyload/1.2.6/vue-lazyload.js"></script>
    <!--网络请求框架-->
    <script src="../../../../axios/0.18.0/axios.min.js"></script>
    <script src="../../../../qs/6.6.0/qs.min.js"></script>
    <!--金额转换-->
    <script src="../../../../accounting/0.4.1/accounting.js"></script>
    <!--时间转换-->
    <script src="../../../../moment/2.24.0/moment.min.js"></script>
    <!--铭飞-->
    <script src="../../../../ms/2.0/ms.umd.js"></script>
    <script src="../../../../ms/2.0/ms-el-form.umd.js"></script>

    <!--通用样式-->
    <link rel="stylesheet" href="../../../../../css/app.css"/>
    <link rel="stylesheet" href="../../../../../css/theme.css">
    <![if IE]>
    <script src="../../../../babel-polyfill/7.8.3/polyfill.min.js"></script>
    <![endif]>

    <script src="../../../../../locale/lang/base/zh_CN.js"></script>
    <script src="../../../../../locale/lang/base/en_US.js"></script>


    <script src="../../../../vue-treeselect/0.4.0/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="../../../../vue-treeselect/0.4.0/vue-treeselect.min.css">

    <script>
        ms.base = "http://localhost:8080";
        ms.manager = "http://localhost:8080/ms";
        ms.web = ms.base;
        //图片懒加载
        Vue.use(VueLazyload, {
            error: ms.base + '/static/images/error.png',
            loading: ms.base + '/static/images/loading.png',
        })
    </script>
    <style>
        .ms-admin-menu .is-active {
            border: 0px !important;
        }
        .vue-treeselect__placeholder,.vue-treeselect__single-value {
            font-size: 12px;
            padding-top: -8px;
        }
        .vue-treeselect__control {
            height: 28px;
        }
        .vue-treeselect__label {
            font-size: 12px;
        }

        .vue-treeselect__menu-container {
            z-index: 9999!important;
        }
        #index .ms-container {
            height: calc(100vh - 141px);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div id="videoTab">
        <div id="tabHeads" class="tabhead">
            <span tabSrc="video" class="focus" data-content-id="video"><var id="lang_tab_insertV"></var></span>
            <span tabSrc="upload" data-content-id="upload"><var id="lang_tab_uploadV"></var></span>
            <span tabSrc="zyk" data-content-id="zyk"><var id="lang_tab_sp_zyk"></var></span>
        </div>
        <div id="tabBodys" class="tabbody">
            <div id="video" class="panel focus">
               <table><tr><td><label for="videoUrl" class="url"><var id="lang_video_url"></var></label></td><td><input id="videoUrl" type="text"></td></tr></table>
               <div id="preview"></div>
               <div id="videoInfo">
                   <fieldset>
                       <legend><var id="lang_video_size"></var></legend>
                       <table>
                           <tr><td><label for="videoWidth"><var id="lang_videoW"></var></label></td><td><input class="txt" id="videoWidth" type="text"/></td></tr>
                           <tr><td><label for="videoHeight"><var id="lang_videoH"></var></label></td><td><input class="txt" id="videoHeight" type="text"/></td></tr>
                       </table>
                   </fieldset>
                   <fieldset>
                      <legend><var id="lang_alignment"></var></legend>
                      <div id="videoFloat"></div>
                  </fieldset>
               </div>
            </div>
            <div id="upload" class="panel">
                <div id="upload_left">
                    <div id="queueList" class="queueList">
                        <div class="statusBar element-invisible">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div><div class="info"></div>
                            <div class="btns">
                                <div id="filePickerBtn"></div>
                                <div class="uploadBtn"><var id="lang_start_upload"></var></div>
                            </div>
                        </div>
                        <div id="dndArea" class="placeholder" style="height:100% !important">
                            <div class="filePickerContainer">
                                <div id="filePickerReady"></div>
                            </div>
                        </div>
                        <ul class="filelist element-invisible">
                            <li id="filePickerBlock" class="filePickerBlock"></li>
                        </ul>
                    </div>
                </div>
                <div id="uploadVideoInfo">
                    <fieldset>
                        <legend><var id="lang_upload_size"></var></legend>
                        <table>
                            <tr><td><label><var id="lang_upload_width"></var></label></td><td><input class="txt" id="upload_width" type="text"/></td></tr>
                            <tr><td><label><var id="lang_upload_height"></var></label></td><td><input class="txt" id="upload_height" type="text"/></td></tr>
                        </table>
                    </fieldset>
                    <fieldset>
                        <legend><var id="lang_upload_alignment"></var></legend>
                        <div id="upload_alignment"></div>
                    </fieldset>
                </div>
            </div>
            <!-- 资源库 -->
            <div id="zyk" class="panel">
                <div id="zyk_tp_list" class="searchList" style="height: 350px !important;">
                    <div id="index" class="ms-index" style="height:100%" v-cloak>
                        <ms-search ref="search" @search="search" :condition-data="conditionList" :conditions="conditions"></ms-search>
                        <div class="ms-search">
                            <el-row>
                                <el-form :model="form"  ref="searchForm"  label-width="120px" size="mini">
                                    <el-row>
                                        <el-col :span="8" style="width:45% !important">
                                            <!--名称-->
                                            <el-form-item  label="视频名称" prop="fileName">
                                                <el-input
                                                        v-model="form.fileName"
                                                        :disabled="false"
                                                        :readonly="false"
                                                        :style="{width:  '100%'}"
                                                        :clearable="true"
                                                        placeholder="请输入名称">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="16" style="text-align: right;width:45% !important">
                                            <el-button type="primary" icon="el-icon-search" size="mini" @click="currentPage=1;list(true)">搜索</el-button>
                                            <el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-row>
                        </div>
                        <el-main class="ms-container">
                            <el-table height="calc(100vh - 68px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark">
                                <el-table-column type="index" label="序号" width="60" :index="indexMethod" align="center"></el-table-column>
                                <el-table-column label="名称"   align="left" prop="fileName"></el-table-column>
                                <el-table-column label="上传时间"   min-width="200" align="center" prop="createDate" ></el-table-column>
                                <el-table-column label="选择" width="180" align="center">
                                    <template slot-scope="scope">
                                        <el-radio :label="scope.$index" v-model="radio" @change.native="handleSelectionChange(scope.row)">&nbsp;</el-radio>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    background
                                    :page-sizes="[10,20,30,40,50,100]"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    :total="total"
                                    class="ms-pagination"
                                    @current-change='currentChange'
                                    @size-change="sizeChange">
                            </el-pagination>
                        </el-main>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jquery -->
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>

<!-- webuploader -->
<script type="text/javascript" src="../../third-party/webuploader/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">

<!-- video -->
<script type="text/javascript" src="video.js"></script>

<script>
var indexVue = new Vue({
	el: '#index',
	data:{
		conditionList:[
        //名称
        {'action':'and', 'field': 'FILE_NAME', 'el': 'eq', 'model': 'fileName', 'name': '名称', 'type': 'input'},
		],
		conditions:[],
		dataList: [], //资源库列表
		selectionList:[],//资源库列表选中
		total: 0, //总记录数量
        pageSize: 10, //页面数量
        currentPage:1, //初始页
        manager: ms.manager,
		loading: true,//加载状态
		emptyText:'',//提示文字
		radio:'',
		//搜索表单
		form:{
			sqlWhere:null,
                    // 名称
                    fileName:'',
                    // 文件
                    fileUrls: [],
                    fileType:'02',
		},
	},
	watch:{

	},
	methods:{
		isChecked: function(row) {
			if(row.del == 3) {
				return false;
			}
			return true;
		},
	    //查询列表
	    list: function(isSearch) {
	    	var that = this;
	    	var data = {}; //搜索参数
			that.loading = true;
			var page={
				pageNo: that.currentPage,
				pageSize : that.pageSize
			}
			var form = JSON.parse(JSON.stringify(that.form))


			if(isSearch) {
				//删除空字符串
				for (key in form){
					if(form[key] === undefined || form[key] === null){
						delete  form[key]
					}
				}
				form.sqlWhere ? data = Object.assign({}, {sqlWhere: form.sqlWhere}, page) : data = Object.assign({}, form, page)
			} else {
				data = Object.assign({}, form, page);
			}

			history.replaceState({form:form,page:page},"");
			ms.http.post(ms.manager+"/cmsMessage/cmsResourcePool/list.do",data).then(
					function(res) {
						if (!res.result||res.data.total <= 0) {
							that.emptyText ="暂无数据"
							that.dataList = [];
							that.total = 0;
						} else {
							that.emptyText = '';
							that.total = res.data.total;
							that.dataList = res.data.rows;
						}
						that.loading = false;
					}).catch(function(err) {
                        that.loading = false;
                        console.log(err);
                    });

			},
		//资源库列表选中
		handleSelectionChange:function(val){
			this.selectionList = val;
            if (val.length > 1) {
              this.$refs.multipleTable.clearSelection();
              this.$refs.multipleTable.toggleRowSelection(val.pop());
            }

            console.log(this.selectionList);
		},
		//复制
		copy: function (row) {
			var that = this;
			delete row.id
			ms.http.post(ms.manager + "/cmsMessage/cmsResourcePool/save.do", row).then(function (res) {
				if (res.result) {
					that.$notify({
						title:'成功',
						type: 'success',
						message: "复制成功"
					});
					//复制成功，刷新列表
					that.list();
				} else {
					that.$notify({
						title: "错误",
						message: res.msg,
						type: 'warning'
					});
				}
			});
		},
		//删除
        del: function(row){
        	var that = this;
        	that.$confirm("此操作将永久删除所选内容, 是否继续", "提示", {
					    	confirmButtonText: "确认",
					    	cancelButtonText: "取消",
					    	type: 'warning'
					    }).then(function() {
					    	ms.http.post(ms.manager+"/cmsMessage/cmsResourcePool/delete.do", row.length?row:[row],{
            					headers: {
                					'Content-Type': 'application/json'
                				}
            				}).then(
	            				function(res){
		            				if (res.result) {
										that.$notify({
						     				type: 'success',
						        			message:"删除成功"
						    			});
					    				//删除成功，刷新列表
					      				that.list();
					      			}else {
										that.$notify({
											title: "错误",
											message: res.msg,
											type: 'warning'
										});
									}
	            			});
					    }).catch(function(err) {
							//删除如果用户取消会抛出异常，所以需要catch一下
						});
        		},
		//新增
        save:function(id){
			form.open(id);
        },

        //pageSize改变时会触发
        sizeChange:function(pagesize) {
			this.loading = true;
            this.pageSize = pagesize;
            this.list(true);
        },
        //currentPage改变时会触发
        currentChange:function(currentPage) {
			this.loading = true;
			this.currentPage = currentPage;
            this.list(true);
        },
		search:function(data){
        	this.form.sqlWhere = JSON.stringify(data);
        	this.list(true);
		},
		//重置表单
		rest:function(){
			this.currentPage = 1;
			this.form.sqlWhere = null;
			this.$refs.searchForm.resetFields();
			this.list();
		},
        indexMethod(index){
            index = (index + 1) + (this.currentPage - 1) * this.pageSize
            return index
        },
        downloadFile(row){
            if(JSON.parse(row.fileUrls)[0].path !='' && JSON.parse(row.fileUrls)[0].path !=null){
                window.open(ms.base+JSON.parse(row.fileUrls)[0].path);
            }
        }
	},
    created:function(){

            if(history.state){
                this.form = history.state.form;
                this.currentPage = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }

            this.list();
        },
    })
    </script>
</body>
</html>